<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="cnv" width="600" height="550"></canvas>
  </body>
  <script>
    const cnvBs = document.querySelector("#cnv");
    const context = cnvBs.getContext("2d");
    //柱形图
    context.fillRect(50, 1, 1, 500);
    context.fillRect(0, 460, 550, 3);
    context.fill();
    context.fillStyle = "red";
    context.fillRect(100, 260, 50, 200);
    context.fillStyle = "#000";
    context.fillRect(200, 160, 50, 300);
    context.fillStyle = "blue";
    context.fillRect(300, 110, 50, 350);
    context.fillStyle = "green";
    context.fillRect(400, 60, 50, 400);
    //数值
    context.fillStyle = "#000";
    context.font = "30px sans-serif";
    context.fillText("1", 120, 500);
    context.fillText("2", 220, 500);
    context.fillText("3", 320, 500);
    context.fillText("4", 420, 500);
    context.fill();

    //箭头
    context.beginPath();
    context.moveTo(80, 60);
    context.lineTo(50, 0);
    context.lineTo(20, 60);
    context.stroke();

    // context.beginPath();
    // context.moveTo(60, -60);
    // context.lineTo(550, 460);
    // context.lineTo(360, 0);
    context.stroke();
  </script>
  <style>
    body {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #cnv {
      border: 1px solid #000;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: 20px auto;
    }
  </style>
</html>
